<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<title>个人资料</title>
<!-- 引入layui样式和脚本 -->
<link rel="stylesheet" href="../admin/layui/css/layui.css">
<script src="../admin/layui/layui.js"></script>
<!-- <style type="text/css">
.layui-input, .layui-select, .layui-textarea {
    height: 22px;
    line-height: 1.3;
    line-height: 38px\9;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    border-radius: 2px;
}
</style> -->
</head>
<body>
	<!-- 引入个人中心头部 -->
	<jsp:include page="user-header.jsp"></jsp:include>

	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<!-- 引入左侧导航栏 -->
			<jsp:include page="pull-left-bgf.jsp"></jsp:include>
			<div class="pull-right">
				<div class="user-content__box clearfix bgf">
					<div class="title">账户信息-个人资料</div>
					<%-- <div class="port b-r50" id="crop-avatar">
						<div class="img">
							<img src="${USER_SESSION.userUrl }" class="cover b-r50">
						</div>
					</div> --%>
					<c:if test="${ empty USER_SESSION}">
						<h3>您还没有登录呦~</h3>
					</c:if>
					<c:if test="${ not empty USER_SESSION}">
						<form action="" class="user-setting__form layui-form" role="form">
							<div class="user-form-group layui-hide">
								<label for="user-id">用户id：</label> <input type="text"
									id="user-id" value="${USER_SESSION.userId }"
									placeholder="请输入您的昵称" layui-disabled disabled name="userId">
							</div>
							<div class="user-form-group" id="crop-avatar" style="width: 80px">
								<div class="img">
									<img src="images/icons/default_avt.png" class="cover b-r50"
										name="userUrl"> <input type="text" id="user-id"
										class="layui-hide" value="images/icons/default_avt.png"
										placeholder="请输入" name="userUrl">
								</div>
							</div>
							<div class="user-form-group">
								<label for="user-id">登录账号：</label> <input type="text"
									id="user-id" value="${USER_SESSION.userPhone }"
									placeholder="请输入您的昵称" name="userPhone" layui-disabled disabled>
							</div>
							<div class="user-form-group">
								<label class="layui-form-label" for="user-id">性别：</label>
								<div class="layui-input-block" id="user-id">
									<select name="userSex" lay-filter="aihao">
										<option value="">${USER_SESSION.userSex }</option>
										<option value="男">男</option>
										<option value="女">女</option>
									</select>
								</div>
							</div>
							<%-- <div class="user-form-group"> checked
								<label>性别：</label> <input type="text" id="user-id"
									value="${USER_SESSION.userSex }" placeholder="请输入您的性别"
									name="userSex">
							</div> --%>
							<div class="user-form-group">
								<label for="user-id">生日：</label> 
								<label>
								  <input type="text" class="datepicker" value="${USER_SESSION.userBirthday }"
									placeholder="请选择您的出生日期" name="userBirthday">
								</label>
							</div>
							<div class="user-form-group">
								<button type="button" class="btn" id="updateBtn" lay-submit
									lay-filter="updateformDemo">确认修改</button>
							</div>
						</form>
					</c:if>
					<script src="js/zebra.datepicker.min.js"></script>
					<link rel="stylesheet" href="css/zebra.datepicker.css">
					<script>
						$('input.datepicker').Zebra_DatePicker({
							default_position : 'below',
							show_clear_date : false,
							show_select_today : false,
						});
						layui.use([ 'table', 'form', 'layer' ], function() {
							var table = layui.table;
							var form = layui.form;
							var layer = layui.layer;
							var $ = layui.$;

							//监听提交---修改
							form.on('submit(updateformDemo)', function(data) {
								//layer.msg(JSON.stringify(data.field));
								//向服务端发送请求
								$.post("updUserDan", data.field, function(res) {
									if (res.code == 0) {
										alert("修改成功")
									} else {
										alert("修改失败")
									}
								}, "json");
								return false;
							});

						});
					</script>
				</div>
			</div>
		</section>
	</div>
	<!-- 头像选择模态框 -->
	<!-- 	<script src="js/cropper/cropper.min.js"></script>
	<script src="js/cropper/sitelogo.js"></script>
	<div class="modal fade" id="avatar-modal" aria-hidden="true"
		aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<form class="avatar-form" action="{%url('admin/upload-logo')%}"
					enctype="multipart/form-data" method="post">
					<div class="modal-header">
						<button class="close" data-dismiss="modal" type="button">&times;</button>
						<h4 class="modal-title" id="avatar-modal-label">Change Logo
							Picture</h4>
					</div>
					<div class="modal-body">
						<div class="avatar-body">
							<div class="avatar-upload">
								<input class="avatar-src" name="avatar_src" type="hidden">
								<input class="avatar-data" name="avatar_data" type="hidden">
								<label for="avatarInput">图片上传</label> <input
									class="avatar-input" id="avatarInput" name="avatar_file"
									type="file">
							</div>
							<div class="row">
								<div class="col-md-9">
									<div class="avatar-wrapper"></div>
								</div>
								<div class="col-md-3">
									<div class="avatar-preview preview-lg"></div>
									<div class="avatar-preview preview-md"></div>
									<div class="avatar-preview preview-sm"></div>
								</div>
							</div>
							<div class="row avatar-btns">
								<div class="col-md-9">
									<div class="btn-group">
										<button class="btn" data-method="rotate" data-option="-90"
											type="button" title="Rotate -90 degrees">
											<i class="fa fa-undo"></i> 向左旋转
										</button>
									</div>
									<div class="btn-group">
										<button class="btn" data-method="rotate" data-option="90"
											type="button" title="Rotate 90 degrees">
											<i class="fa fa-repeat"></i> 向右旋转
										</button>
									</div>
								</div>
								<div class="col-md-3">
									<button class="btn btn-success btn-block avatar-save"
										type="submit">
										<i class="fa fa-save"></i> 保存修改
									</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div> -->


	<!-- 引入右侧菜单 -->
	<jsp:include page="right-nav.jsp"></jsp:include>
	<!-- 底部信息 -->
	<!-- 引入脚部 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>